<template>
  <!-- 滚动活动 -->
  <!-- 文字较短时，通过设置 scrollable 属性开启滚动播放 -->
  <van-notice-bar :scrollable="false" left-icon="volume-o" mode="closeable">
    <van-swipe
      vertical
      class="notice-swipe"
      :autoplay="3000"
      :touchable="false"
      :show-indicators="false"
    >
      <van-swipe-item class="img_box" v-for="text in texts" :key="text">
        {{ text }}
      </van-swipe-item>
    </van-swipe>
  </van-notice-bar>
  <!-- 主体内容 开始 -->
  <div class="content-container">
    <van-icon name="hot" color="#ee0a24" size="10vw" />
    <div>
      <div class="content-shop">
        <div class="content-shopname">{{ orderStore.shopName }}</div>
        <van-icon
          name="arrow-down"
          size="4vw"
          color="#ee0a24"
          @click="selectPlace"
        />
        <van-popup
          v-model:show="show"
          closeable
          position="bottom"
          :style="{ height: '30%' }"
          >这里显示可选餐厅列表</van-popup
        >
      </div>
      <div class="content-descrpition">{{ orderStore.shopAddress }}</div>
    </div>
    <!-- <van-icon name="todo-list" color="#ee0a24" size="4vw">预约</van-icon> -->
  </div>

  <!-- 主体内容 结束 -->
</template>
<script setup lang="ts">
import { ref, Ref } from "vue";
import { useorderStore } from "@/store/modules/module";
const orderStore = useorderStore();

orderStore.shopName = "乐天城肯德基一店";
orderStore.shopAddress = "武汉市洪山区珞喻路4号";

const texts: Ref<string[]> = ref([
  "肯德基疯狂星期四，热辣香骨鸡买一送十！",
  "超级巨无霸三层汉堡，第二份半价！",
  "肯德基8元早餐，新品酷炫来袭！",
]);
const show = ref(false);
const selectPlace = () => {
  show.value = true;
};
</script>
<style scoped lang="less">
.content-container {
  display: flex;
  align-items: center;
  height: 15vw;
  background-color: white;
  .content-shop {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    .content-shopname {
      font-size: 6vw;
      text-align: center;
    }
  }
  .content-descrpition {
    font-size: 3vw;
  }
}
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
</style>
